<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/cookie.js"></script>
    <style>
      html,
      body,
      div,
      img,
      span,
      p {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 170px;
        height: 250px;
        border: 1px solid hotpink;
        margin: 0 auto;
      }
      span {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        cursor: pointer;
      }
      .fangdajing {
        width: 100px;
        height: 100px;
        position: relative;
        overflow: hidden;
      }
      .smallImg {
        position: absolute;
        width: 100px;
        height: 100px;
      }
      .bigImg {
        position: absolute;
        width: 200px;
        height: 200px;
        display: none;
      }
      button {
        cursor: pointer;
      }
    </style>
  </head>
  <div class="box"></div>
  <body>
    <script>
      let pid = getCookie("pid");
      let oDiv = document.querySelector(".box");
      let str = "";
      axios
        .get("http://jx.xuzhixiang.top/ap/api/detail.php", {
          params: {
            id: pid,
          },
        })
        .then(function (res) {
          //   console.log(res.data.data);
          let product = res.data.data;
          let arr = [];
          for (let i in product) {
            arr.push(product[i]);
          }
          //   console.log(arr);

          str += `<div class="fangdajing"><img src="${arr[3]}" class="smallImg"/>
          <img src="${arr[3]}" class="bigImg"/></div>
                  <span>-</span> <span>1</span> <span>+</span>
                  <div class="pTotal">${arr[2]}</div>
                  <div>${arr[4]}</div>
                  <span>商品总价：</span><span>${arr[2]}</span>
                  <button>加入购物车</button>
                  `;
          oDiv.innerHTML = str;
          let pTotal = document.querySelector(".pTotal");
          let oSpan = document.querySelectorAll("span");
          let button = document.querySelector("button");
          let aImgs = document.querySelectorAll("img");
          let fangdajing = document.querySelector(".fangdajing");

          fangdajing.onmouseover = function (e) {
            aImgs[1].style.display = "block";
            aImgs[0].style.opacity = 0;
            document.onmousemove = function (e) {
              let evt = e || event;
              let cx = evt.clientX - fangdajing.offsetLeft;

              let cy = evt.clientY;

              let maxx = aImgs[0].offsetWidth;
              let maxy = aImgs[0].offsetHeight;
              if (cx > maxx) {
                cx = maxx;
              }
              if (cx <= 0) {
                cx = 0;
              }
              if (cy > maxy) {
                cy = maxy;
              }
              if (cy <= 0) {
                cy = 0;
              }

              aImgs[1].style.left = -1.5 * cx + "px";
              aImgs[1].style.top = -1.5 * cy + "px";
            };
            fangdajing.onmouseout = function () {
              document.onmousemove = null;
              aImgs[1].style.display = "none";
              aImgs[0].style.opacity = 1;
            };
          };

          oSpan[0].onclick = function () {
            if (oSpan[1].innerText == 1) {
              oSpan[1].innerText = 1;
            } else {
              oSpan[1].innerText--;
            }
            oSpan[4].innerText = oSpan[1].innerText * pTotal.innerText;
          };
          oSpan[2].onclick = function () {
            oSpan[1].innerText++;
            oSpan[4].innerText = oSpan[1].innerText * pTotal.innerText;
          };
          button.onclick = function () {
            axios
              .get("http://jx.xuzhixiang.top/ap/api/add-product.php", {
                params: {
                  uid: 134063,
                  pid: pid,
                  pnum: oSpan[1].innerText,
                },
              })
              .then((res) => {
                console.log(res);
                location.assign("cart.html");
              });
          };
        });
    </script>
  </body>
</html>
